<script>
import {showDataFn,changeDataFn} from '@/api/pro';
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            commendList:[],
            currentPage:1
        }
    },
    mounted() {
        showDataFn({
            type:'isrecommend',
            flag:1
        }).then(res=>{
            if(res.code==200){
                console.log(res.message);
                this.commendList=res.data
                // console.log(res);
            }else{
                console.log(res.message);
            }
        })
    },
    computed:{
        tableData(){
            return this.commendList.slice((this.currentPage-1)*5, (this.currentPage-1)*5+5)
        }
    },
    methods: {
        changecommend(row){
            changeDataFn({
                proid:row.proid,
                type:'isrecommend',
                flag:row.isrecommend
            }).then(res=>{
                if(res.code==200){
                    ElMessage.success(res.message)
                }else{
                    ElMessage.error(res.message)
                }
            })
        },
    },
}
</script>
<template>
    <h4>推荐列表</h4>
    <!-- 列表渲染 -->
    <el-table :data="tableData">
    <el-table-column width="100" type="index" label="序号" >
        <template #default={$index}>
            <el-tag> 
               {{(currentPage-1)*5+1+ $index }} 
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column  prop="img" label="图片">
        <template #default={row}>
            <el-image :style="{width:'80px',height:'80px'}" :src="row.img1"> 
            </el-image>
        </template>
    </el-table-column>
    <el-table-column width="280" prop="proname" label="商品名称"></el-table-column>
    <el-table-column prop="category" label="商品分类"></el-table-column>
    <el-table-column prop="originprice" label="商品价格"></el-table-column>
    <el-table-column prop="isrecommend" label="是否推荐">
        <template #default={row}>
            <el-switch
            v-model="row.isrecommend" :active-value="1" :inactive-value="0" @change="changecommend(row)" 
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination  :page-size="5" v-model:current-page="currentPage" background layout="prev, pager, next" :total="commendList.length"  />
</template>
